<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  swipePart: {
    type: Array,
    default: () => [],
  },
});
const swipGroup = {};
// 思路一 两次循环
/*for (const item in props.swipePart) {
  swipGroup[item.enumPictureCategory] = [];
}
for (const item in swipGroup) {
  const valueArray = swipGroup[item.enumPictureCategory];
  valueArray.push(item);
}*/
// 思路二
for (const item of props.swipePart) {
  let valueArrry = swipGroup[item.enumPictureCategory];
  if (!valueArrry) {
    valueArrry = [];
    swipGroup[item.enumPictureCategory] = valueArrry;
  }
  valueArrry.push(item);
}
console.log(swipGroup);
const nameReg = /【(.*)】/i;
const getName = (name) => {
  // return name.replace('：', '').replace('【', '').replace('】', '');
  const results = nameReg.exec(name);
  return results[1];
};

const getCategoryIndex = (item) => {
  const valueArray = swipGroup[item.enumPictureCategory];
  return valueArray.findIndex((data) => data === item);
};
</script>

<template>
  <div class="swipe">
    <van-swipe class="swipe-list" :autoplay="3000" indicator-color="white">
      <template v-for="item in swipePart" :key="item">
        <van-swipe-item class="item">
          <img :src="item.url" alt="" />
        </van-swipe-item>
      </template>
      <template #indicator="{ active, total }">
        <div class="indicator">
          <template v-for="(value, key, index) in swipGroup" :key="key">
            <span class="item" :class="{ active: swipePart[active]?.enumPictureCategory == key }">
              <span>{{ getName(value[index].title) }}</span>
              <span class="count" v-if="swipePart[active]?.enumPictureCategory == key">
                {{ getCategoryIndex(swipePart[active]) }}/{{ total }}</span
              >
            </span>
          </template>
        </div>
      </template>
    </van-swipe>
  </div>
</template>

<style scoped>
.swipe {
  .swipe-list {
    .item {
      img {
        width: 100%;
      }
    }
  }
  .indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    color: #ffffff;
    display: flex;
    background: rgba(0, 0, 0, 0.8);
    .item {
      margin: 0 3px;
      &.active {
        background: #ffffff;
        color: #000;
        border-radius: 5px;
      }
    }
  }
}
</style>
